<script>

import { currentUser } from '@/utils/login-user';
import request from '@/utils/request';

export default {
    props: ["update"],
    created() {
        this.loadData()
    },
    data() {
        return {
            itemCount: 0
        }
    },
    methods: {
        loadData() {
            if (currentUser()) {
                request.get('/cart/count').then(res => {
                    this.itemCount = res.data;
                })
            }else{
                this.itemCount = 0;
            }
        },
        routeCart() {
            this.$router.push("/cart")
        }
    },
    watch: {
        update() {
            this.loadData()
        }
    }
}
</script>

<template>
    <div class="shopping-bag" @click="routeCart">
        <span><span
                :class="{'el-icon-shopping-bag-1': itemCount != 0, 'el-icon-shopping-bag-2': itemCount == 0 }"></span>购物袋<span
                class="cart-counter">{{ itemCount }}</span>件</span>
    </div>
</template>

<style scoped>
.shopping-bag {
    border: solid #c8c8c8 1px;
    line-height: 34px;
    padding: 0 20px;
    cursor: pointer;
    width: 150px;
    min-width: 140px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.cart-counter {
    color: #d1152a;
    padding: 0 5px;
}
</style>